<template>
  <div class="price-wrapper"  v-title data-title="六个轮子 | 邀请好友来骑行，赢iPhone8+千元现金！">
    <div class="content">
      <div class="thumbnail">
        <img src="../styles/asset/winphone/winphone_02.png" />
      </div>
      <div class="thumbnail">
        <img src="../styles/asset/winphone/winphone_03.png" />
      </div>
      <div class="thumbnail" @click="pop=true" >
        <img src="../styles/asset/winphone/winphone_04.png" />
      </div>
      <div class="thumbnail">
        <img src="../styles/asset/winphone/winphone_05.png" />
      </div>
      <div class="thumbnail">
        <img src="../styles/asset/winphone/winphone_06.png" />
      </div>
    </div>
    <transition name="fade-in">
    <div v-if="pop" class="pop_box" :style="'height:' + this.boxbgHeight">
      <div class="fade_bg" @click="pop = false" :style="'height:' + this.boxbgHeight"></div>
      <div class="fade_out thumbnail">
        <img src="../styles/asset/winphone/pop.png" />
        <a @click="download()" ></a>
      </div>
    </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        pop:false,
        boxbgHeight: '',
        img: require('../styles/asset/share.jpg')
      }
    },
    mounted() {
      this.$nextTick(() => {
        this._setBoxHeight();
      });
      window.addEventListener('resize', () => {
        this._setBoxHeight();
      });
      let root = process.env.MAIN_ROOT;
      let url = window.location.href;
      this.$util.sendShareMessage("六个轮子 | 邀请好友来骑行，赢iPhone8+千元现金！","你好我好大家好！", root+this.img,url);
    },
    methods: {
      _setBoxHeight()
      {
        let height = window.innerHeight;
        this.boxbgHeight = height + 'px';
      },
      download(){
        this.pop = false;
        let userAgentObj = navigator.userAgent;
        if(userAgentObj.match(/MicroMessenger/i)){
          if(userAgentObj.match(/Android/i)){
            window.location.href = 'http://app.qq.com/#id=detail&appid=1106220919'
          }else if(userAgentObj.match(/iPhone/i)) {
            window.location.href = "xingjiakejiIOS:///#/activity/getcouponDaily";
            window.setTimeout(function(){
              window.location.href = "https://itunes.apple.com/cn/app/%E7%94%B5%E6%96%91%E9%A9%AC-%E8%AE%A9%E5%87%BA%E8%A1%8C%E6%9B%B4%E5%AE%89%E5%85%A8/id1252928655?mt=8";
            },2000)
          }else{
            window.location.href="http://download.xingjiakeji.com/";
          }
        }
      }
    }
  }
</script>

<style>
  @import "../styles/styles.css";
  .price-wrapper {
    width: 100%;
    height: 100%;
  }
  .content{ overflow: scroll; width: 100%; height: 100%;}
  .pop_box{
    position: fixed;
    display: flex;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items:center;
    justify-content: center;
  }
  .fade_bg{ background-color: rgba(0,0,0,0.7); position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
  .fade_out{ background-color: #fff; border-radius: 0.4rem; width: 5.8rem; font-size: 14px; margin: 0 auto; padding: 0.5rem 0.5rem 0; max-height:90%; overflow-y: scroll;
    animation-name: zoomIn;
    animation-duration: .3s;
    animation-fill-mode: both;
    position: relative;
  }
  .fade_out>a{ position: absolute; bottom: 0; width: 100%; height: 1.2rem; display: block;}
  .thumbnail{ padding: 0; margin: 0; overflow: hidden;}
  .thumbnail>img{ width: 100%; float: left;}
</style>
